import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { NavBar,InfiniteScroll } from 'antd-mobile'
import styles from './css/list.module.css'
import http from '../../utils/http'

const List = () => {
    const nav = useNavigate()
    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
     const [hasMore, setHasMore] = useState(true)

     // 请求列表接口
    const getData = async () => {
        const res = await http.get("/api/list", { params: { page } })
        const { code, data } = res.data
        console.log(data);
        if (code === 200) {
            setList([...list, ...data])
            setPage(page + 1)
            if(data.length === 0){
                setHasMore(false)
            }
        }
    }

    useEffect(() => {
        getData()
    }, [])

    const getList=(item)=>{
      nav("/deail",{state:item})
    }
    return (
        <div>
            {/*渲染列表*/}
            <NavBar onBack={() => nav(-1)}>演唱列表</NavBar>
            <div className={styles.box}>
                {
                    list.length > 0 &&
                    list.map((item, ind) => {
                        return <dl key={ind} className={styles.dl} onClick={()=>getList(item)}>
                            <dt>
                                <img src={item.image} alt='' style={{ width: "100px", height: "100px"}} />
                            </dt>
                            <dd>{item.title}</dd>
                            <dd>{item.date}</dd>
                            <dd className={styles.price}>￥{item.price}</dd>
                            {/*<dd className={styles.sp1}>演唱会</dd>*/}
                        </dl>
                    })
                }
            </div>
             {/*上拉加载*/}
            <InfiniteScroll loadMore={getData} hasMore={hasMore} />
        </div>
    )
}

export default List
